<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>信息化运行情况</title>
    <!-- Bootstrap -->
    <link href="framework/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="framework/jquery/jquery-1.11.3.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="framework/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <!--custom-->
    <link href="css/index.css" rel="stylesheet">

    <script src="framework/Highmaps-5.0.12/code/highcharts.js"></script>
    <script src="framework/Highmaps-5.0.12/code/themes/dark-unica.js"></script>

    <!--marquee-->
    <link href="css/marquee.css" rel="stylesheet">
    <script src="framework/marquee/marquee.js"></script>
    <!--websoket-->
    <script src="framework/websocket/socket-common.js"></script>
</head>
<body>

<div class="container-fluid">
    <!--header-->
    <div class="row padder-v-lg">
        <div class="col-md-9">
            <h1 class="header-title">成都千嘉客户服务感知管理系统<small>CHENGDU QIANJIA TECHNOLOGY CO.,LTD</small></h1>
        </div>
        <div class="col-md-1"></div>
        <div class="col-md-2">
            <a href="/index.html" class="back"></a>
        </div>
    </div>
    <!--content-->
    <div class="row">
        <!--工业表-->
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="part">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="wrapper-spe">
                                    <span class="content">投运量</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="divide-line"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="wrapper-sm">
                                    <div id="whl" class="highchar-content-xs"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--民用表-->
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="part">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="wrapper-spe">
                                    <span class="content">抄表回传率</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="divide-line"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="wrapper-sm">
                                    <div id="cb" class="highchar-content-xs"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row m-t-md">
        <!--工业表-->
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="part">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="wrapper-spe">
                                    <span class="content">故障率</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="divide-line"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="wrapper-sm">
                                    <div id="gz" class="highchar-content-xs"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--民用表-->
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="part">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="wrapper-spe">
                                    <span class="content">故障恢复率</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="divide-line"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="wrapper-sm">
                                    <div id="gzcz" class="highchar-content-xs"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>

<script type="text/javascript">
    $(function () {
        initWhl();
        initCb();
        initGz();
        initGzcz();
    });

    function initWhl(){
        $.post("/qjzt/whl/gy", {}, function (resp) {
            if(resp.attributes){
                var map = resp.attributes;
                var categories = map.categories;
                var series = map.series;

                $('#whl').highcharts({
                    colors: ["#fc4041"],
                    chart: {
                        zoomType: 'xy',
                        style: {
                            fontSize: "15px"
                        }
                    },
                    title: {
                        text: null
                    },
                    xAxis: [{
                        categories: categories,
                        crosshair: true,
                        labels: {
                            style: {
                                fontSize: "15px"
                            }
                        }
                    }],
//                    colors: ["#23c3fd", "#fc198f", "#a4ca57", "#0d698d"],
                    yAxis: [{ // Primary yAxis
                        labels: {
                            format: '{value} K',
                            style: {
                                color: "#c4c6ca",
                                fontSize: "15px"
                            }
                        },
                        title: {
                            text: "数量(户)",
                            style: {
                                color: "#c4c6ca"
                            },
                            rotation: 0,
                            y: -30,
                            offset: 40
                        }
                    }, { // Secondary yAxis
                        labels: {
                            format: '{value} %',
                            style: {
                                color: "#c4c6ca",
                                fontSize: "15px"
                            }
                        },
                        title: {
                            text: '增长率',
                            style: {
                                color: "#c4c6ca"
                            },
                            rotation: 0,
                            y: -30,
                            offset: 40
                        },
                        opposite: true
                    }],
                    tooltip: {
                        shared: true
                    },
                    series: series
                });
            }
        })
    }

    function initCb(){
        $.post("/qjzt/cb/gy", {}, function (resp) {
            if(resp.attributes){
                var map = resp.attributes;
                var categories = map.categories;
                var series = map.series;

                $('#cb').highcharts({
                    colors: ["#f38b08"],
                    chart: {
                        zoomType: 'xy',
                        style: {
                            fontSize: "15px"
                        }
                    },
                    title: {
                        text: null
                    },
                    xAxis: [{
                        categories: categories,
                        crosshair: true,
                        labels: {
                            style: {
                                fontSize: "15px"
                            }
                        }
                    }],
//                    colors: ["#23c3fd", "#fc198f", "#a4ca57", "#0d698d"],
                    yAxis: [{ // Primary yAxis
                        labels: {
                            format: '{value} K',
                            style: {
                                color: "#c4c6ca",
                                fontSize: "15px"
                            }
                        },
                        title: {
                            text: "抄表量(户)",
                            style: {
                                color: "#c4c6ca"
                            },
                            rotation: 0,
                            y: -30,
                            offset: 40
                        }
                    }, { // Secondary yAxis
                        labels: {
                            format: '{value} %',
                            style: {
                                color: "#c4c6ca",
                                fontSize: "15px"
                            }
                        },
                        title: {
                            text: '抄表率',
                            style: {
                                color: "#c4c6ca"
                            },
                            rotation: 0,
                            y: -30,
                            offset: 40
                        },
                        opposite: true
                    }],
                    tooltip: {
                        shared: true
                    },
                    series: series
                });
            }
        });
    }

    function initGz(){
        $.post("/qjzt/gz/gy", {}, function (resp) {
            if(resp.attributes){
                var map = resp.attributes;
                var categories = map.categories;
                var series = map.series;

                $('#gz').highcharts({
                    colors: ["#fc4041", "#f38b08", "#149d9c", "#2577df", "#46b8da"],
                    chart: {
                        zoomType: 'xy',
                        style: {
                            fontSize: "15px"
                        }
                    },
                    title: {
                        text: null
                    },
                    xAxis: [{
                        categories: categories,
                        crosshair: true,
                        labels: {
                            style: {
                                fontSize: "15px"
                            }
                        }
                    }],
//                    colors: ["#23c3fd", "#fc198f", "#a4ca57", "#0d698d"],
                    yAxis: [{ // Primary yAxis
                        labels: {
                            format: '{value} K',
                            style: {
                                color: "#c4c6ca",
                                fontSize: "15px"
                            }
                        },
                        title: {
                            text: "故障数(户)",
                            style: {
                                color: "#c4c6ca"
                            },
                            rotation: 0,
                            y: -30,
                            offset: 40
                        }
                    }, { // Secondary yAxis
                        labels: {
                            format: '{value} %',
                            style: {
                                color: "#c4c6ca",
                                fontSize: "15px"
                            }
                        },
                        title: {
                            text: '故障率',
                            style: {
                                color: "#c4c6ca"
                            },
                            rotation: 0,
                            y: -30,
                            offset: 40
                        },
                        opposite: true
                    }],
                    tooltip: {
                        shared: true
                    },
                    series: series
                });
            }
        });
    }

    function initGzcz(){
        $.post("/qjzt/gzcz/gy", {}, function (resp) {
            if(resp.attributes){
                var map = resp.attributes;
                var categories = map.categories;
                var series = map.series;

                $('#gzcz').highcharts({
                    colors: ["#fc4041", "#f38b08", "#149d9c", "#2577df", "#46b8da"],
                    chart: {
                        zoomType: 'xy',
                        style: {
                            fontSize: "15px"
                        }
                    },
                    title: {
                        text: null
                    },
                    xAxis: [{
                        categories: categories,
                        crosshair: true,
                        labels: {
                            style: {
                                fontSize: "15px"
                            }
                        }
                    }],
//                    colors: ["#23c3fd", "#fc198f", "#a4ca57", "#0d698d"],
                    yAxis: [{ // Primary yAxis
                        labels: {
                            format: '{value} K',
                            style: {
                                color: "#c4c6ca",
                                fontSize: "15px"
                            }
                        },
                        title: {
                            text: "处置量(户)",
                            style: {
                                color: "#c4c6ca"
                            },
                            rotation: 0,
                            y: -30,
                            offset: 40
                        }
                    }, { // Secondary yAxis
                        labels: {
                            format: '{value} %',
                            style: {
                                color: "#c4c6ca",
                                fontSize: "15px"
                            }
                        },
                        title: {
                            text: '处置率',
                            style: {
                                color: "#c4c6ca"
                            },
                            rotation: 0,
                            y: -30,
                            offset: 40
                        },
                        opposite: true
                    }],
                    tooltip: {
                        shared: true
                    },
                    series: series
                });
            }
        });
    }


</script>
</html>